<template>
  <base-content>
    <template>
      <!-- 查询表单 -->
      <el-main>
        <el-form class="fp-form" :inline="true" label-width="70px">
          <el-form-item label="申请时间">
            <el-date-picker v-model="createTimes" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>
          <el-form-item label="手机号" prop="name">
            <el-input v-model="form.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="提现状态">
            <el-select v-model="form.withdraw_status" placeholder="请选择行为类型">
              <el-option label="未支付" :value="1" />
              <el-option label="已支付" :value="2" />
            </el-select>
          </el-form-item>
          <div class="fp-form-footer">
            <div class="pull-right">
              <el-button type="default" @click="handleBaseSearch('reset')">重置</el-button>
              <el-button type="primary" @click="handleBaseSearch('search')">查询</el-button>
            </div>
          </div>
        </el-form>
      </el-main>
      <!-- 积分列表 -->
      <el-table key="btable" v-loading="loading" :data="list">
        <el-table-column prop="insert_time" label="申请时间" />
        <el-table-column prop="user_id" label="用户id" />
        <el-table-column prop="withdraw_score" label="积分" />
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.withdraw_status === 1 ? '未支付' : '已支付' }}
          </template>
        </el-table-column>
        <el-table-column prop="bank_name" label="开户行" />
        <el-table-column prop="bank_account_name" label="户名" />
        <el-table-column prop="bank_card_number" label="卡号" />
        <el-table-column prop="pay_time" label="支付时间" />
        <el-table-column v-if="!isHidden" label="操作" width="160">
          <template slot-scope="scope">
            <el-button v-if="scope.row.withdraw_status === 2" type="primary" size="small" @click="updateEnable(scope.row)">改为未支付</el-button>
            <el-button v-if="scope.row.withdraw_status === 1" type="primary" size="small" @click="updateEnable(scope.row)">改为已支付</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 控件 -->
      <el-main>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="pageChange" />
      </el-main>
    </template>
  </base-content>
</template>

<script>
import { mapGetters } from 'vuex'
import { hasPermission, parseTime } from '@/utils'
import { getUserWithdrawList, updateWithdrawStatus } from '@/api/coupon'

export default {
  data() {
    const isHidden = !hasPermission('积分系统')
    return {
      isHidden,
      loading: false,
      createTimes: [],
      form: {
        start_time: '',
        end_time: '',
        phone: '',
        withdraw_status: ''
      },
      list: [],
      total: 0,
      pageNum: 1,
      pageSize: 10
    }
  },
  computed: {
    ...mapGetters(['sidebar']),
    routes() {
      return this.$router.options.routes
    }
  },
  async mounted() {
    if (this.isHidden) {
      this.operations = []
      this.baseHandles = this.baseHandles.filter((item) => item.key !== 'add')
    }
    this.query()
  },
  methods: {
    async query(param) {
      const params = {
        page_num: this.pageNum,
        page_size: this.pageSize,
        ...param
      }
      try {
        this.loading = true
        const result = await getUserWithdrawList(params)
        this.loading = false
        if (result.code === '0') {
          this.list = result.info.data
          this.total = result.info.meta.count
        } else {
          this.loading = false
        }
      } catch (error) {
        this.loading = false
      }
    },
    // 分页事件
    pageChange(val) {
      this.pageNum = val
      this.query({ page_num: val })
    },
    // 查询 添加 重置 按钮
    handleBaseSearch(key) {
      if (this.createTimes.length > 0) {
        this.form.start_time = parseTime(this.createTimes[0])
        this.form.end_time = parseTime(this.createTimes[1])
      }
      if (key === 'search') {
        this.query(this.form)
      } else {
        this.form = {
          start_time: '',
          end_time: '',
          phone: '',
          withdraw_status: ''
        }
        this.createTimes = []
        this.query(this.form)
      }
    },
    async updateEnable(row) {
      const { id, withdraw_status } = row
      const result = await updateWithdrawStatus({ id, withdraw_status: withdraw_status === 1 ? 2 : 1 })
      if (result.code === '0') {
        this.$message.success('修改成功')
        this.query()
      } else {
        this.$message.error(`修改失败：${result.msg}`)
      }
    }
  }
}
</script>
